<script lang="ts" setup>
import { ref, computed } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { ElDatePicker } from "element-plus";

// Emit: Trigger the date-time change event
const emit = defineEmits<{
  (event: "update:modelValue", value: string): void;
  (event: "choose", value: any): void;
}>();
const props = defineProps({
  modelValue: {

  }
})

watch(()=>props.modelValue, val => {
  selectedDateTime.value = new Date(dayjs(val));
})
// Current date and time
const currentDate = ref(new Date());
const selectedDateTime = ref(new Date());

// Disable next button logic (only if today is not a past date)
const isNextDisabled = computed(() => {
  if (!selectedDateTime.value) {
    return true
  }

  const currentDay = currentDate.value.getDate();
  const currentMonth = currentDate.value.getMonth();
  const currentYear = currentDate.value.getFullYear();

  const selectedDay = selectedDateTime.value.getDate();
  const selectedMonth = selectedDateTime.value.getMonth();
  const selectedYear = selectedDateTime.value.getFullYear();

  return selectedYear > currentYear ||
      (selectedYear === currentYear && selectedMonth > currentMonth) ||
      (selectedYear === currentYear && selectedMonth === currentMonth && selectedDay >= currentDay);
});

// Function to change days
const changeDate = (direction: "prev" | "next") => {
  if (direction === "prev") {
    selectedDateTime.value = new Date(selectedDateTime.value.setDate(selectedDateTime.value.getDate() - 1));
  } else if (direction === "next" && !isNextDisabled.value) {
    selectedDateTime.value = new Date(selectedDateTime.value.setDate(selectedDateTime.value.getDate() + 1));
  }

  emitFormattedDateTime();
};

// Function to handle date change
const handleDateChange = (date: Date) => {
  if (date)
    return
  selectedDateTime.value.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
  emitFormattedDateTime();
};

// Emit the formatted date and time
const emitFormattedDateTime = () => {
  const formattedDateTime = dayjs(selectedDateTime.value).format('YYYY-MM-DD HH:mm:ss');
  emit("update:modelValue", formattedDateTime);
  emit("choose", formattedDateTime);
  console.log(formattedDateTime);
};





const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
  {
    text: '一个月前',
    value: () => {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return date
    },
  },
  {
    text: '一年前',
    value: () => {
      const date = new Date()
      date.setFullYear(date.getFullYear()-1)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}



</script>

<template>
  <div>
    <!-- Previous Day Button -->
    <el-button
        type="primary"
        class="no-border-right-radius"
        :icon="ArrowLeft"
        @click="changeDate('prev')">
    </el-button>

    <!-- Date Picker -->
    <el-date-picker
        v-model="selectedDateTime"
        type="date"
        :clearable="false"
        class="no-radius"
        style="width: 140px"
        :shortcuts="shortcuts"
        @update:model-value="handleDateChange"
        placeholder="Select Date">
    </el-date-picker>

    <!-- Next Day Button -->
    <el-button
        type="primary"
        class="no-border-left-radius"
        :disabled="isNextDisabled"
        @click="changeDate('next')">
      <el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button>
  </div>
</template>

<style scoped lang="scss">
:deep() {
  .el-button.no-border-right-radius {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .el-button.no-border-left-radius {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .no-radius .el-input__wrapper {
    border-radius: 0 !important;
  }
}
</style>
